import React from 'react'
import { Card, Col, Icon, Row, Typography } from 'antd'
import { TwsReactMarkdownPreview } from 'tws-antd'
import '../css/app-list.css'

const {Text} = Typography
const defaultPrograms = [{
  title: '基础技能学习',
  description: '初识linux + Markdown使用 + Git使用指南 + 代码整洁',
  duration: '两周',
  target: '零基础在校生',
  url: 'http://school.thoughtworks.cn/learn/auth/register?code=1054950364751.93627233200246880000.171'
}, {
  title: '任务卡分解与TDD基础',
  description: 'JavaScript编程基础 + DOM基础 + 任务分解 + TDD基础 ',
  duration: '五周',
  target: '零基础在校生',
  url: 'http://school.thoughtworks.cn/learn/auth/register?code=1054950364751.93627233200246920000.172'
}, {
  title: 'JavaScript全栈概述',
  description: 'HTML基础+CSS基础+JavaScript基础',
  duration: '五周',
  target: '零基础在校生',
  url: 'http://school.thoughtworks.cn/learn/auth/register?code=1054950364751.93627233200246980000.174'
}]
const practiseDiary = {
  completeName: '李玥(@aurora)',
  content: '\n' +
  '# 培训安排\n' +
  '时间：2019年3月18号～5月5号\n' +
  '\n' +
  '主要参与者：全国计算机专业的Dev、QA和他们的Buddy\n' +
  '\n' +
  '形式：\n' +
  '- 线上：毕业生在思沃数字平台自主学习\n' +
  '- 线下：Buddy与毕业生在办公室辅导练习\n' +
  '\n' +
  '## 周一至周五\n' +
  '### 线上学习：\n' +
  '- 培训期间灵活安排时间，自主按时完成线上学习任务。作业完成后，提醒Buddy检查点评。\n' +
  '- 每周编写当周总结 [成长日志](https://school.thoughtworks.cn/learn/practise-diary/index.html#/)\n' +
  '\n' +
  '## 周末\n' +
  '### 线下辅导：\n' +
  '- 提前准备好希望Buddy协助解决的问题列表，按时参加每周末的线下辅导。\n' +
  '\n' +
  '\n' +
  '## 有用链接：\n' +
  '- 《[学员使用指南](https://s3.cn-north-1.amazonaws.com.cn/tws-courses-resource/system-introduction/%E5%AE%8C%E6%88%90%E4%B8%80%E5%BC%A0%E4%BB%BB%E5%8A%A1%E5%8D%A1.mp4)》\n' +
  '\n',
  date: '2018-10-11'

}
export default class HomePageBody extends React.Component {
  render () {
    return <div className='container'>
      <div id='app-list'>
        <h3 className='divider'>常用应用</h3>
        <Row>
          <Col md={{span: 6}} className='app-item'>
            <a href='https://school.thoughtworks.cn/bbs/'>
              <Card
                hoverable
                style={{height: 200}}
                title='论坛'>
                <Icon type='tags' />
              </Card>
            </a>
          </Col>
          <Col md={{span: 6}} className='app-item'>
            <Card
              hoverable
              style={{height: 200}}
              title='我的训练营'
              onClick={() => this.props.changApp('student-program')}>
              <Icon type='folder' />
            </Card>
          </Col>
          <Col md={{span: 6}} className='app-item'>
            <Card
              hoverable
              style={{height: 200}}
              title='成长日志'
              onClick={() => this.props.changApp('practise-diary')}>
              <Icon type='star' />
            </Card>
          </Col>
        </Row>
      </div>
      <div className='public-program'>
        <h3 className='divider'>公开训练营</h3>
        <Row>
          {defaultPrograms.map(item => {
            return <Col span={6} className='program-item'>
              <Card
                title={<span style={{fontWeight: 'bold'}}>《{item.title}》</span>}
                extra={<a onClick={() => {
                  window.location.href = ''
                }}>免费学习</a>}
              >
                <p>
                  <Text code type='danger'>学习内容</Text> :
                  {item.description}</p>
                <p>
                  <Text code type='danger'>时间</Text> :
                  {item.duration}</p>
                <p>
                  <Text code type='danger'>适用对象</Text> :
                  {item.target}</p>
              </Card>
            </Col>
          })}

        </Row>
      </div>
      <div className='practise-diary'>
        <h3 className='divider'>优秀日志</h3>
        <Card title={practiseDiary.completeName}
          extra={(practiseDiary.date)}
          className='title-text-position' bordered noHovering>
          <div className='mark-down-wrap'>
            <TwsReactMarkdownPreview source={practiseDiary.content} />
          </div>
        </Card>
      </div>
    </div>
  }
}
